<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= data.title %></title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
</head>
<body class="bg-gray-100">
  <!-- 头部导航 -->
  <header class="bg-white shadow">
    <nav class="container mx-auto px-4 py-4">
      <h1 class="text-2xl font-bold text-gray-800">商城</h1>
    </nav>
  </header>

  <!-- 主要内容 -->
  <main class="container mx-auto px-4 py-8">
    <section class="mb-8">
      <div class="swiper-container rounded-lg overflow-hidden">
        <div class="swiper-wrapper">
          <% data.banners.forEach(function(banner) { %>
            <div class="swiper-slide">
              <a href="<%= banner.url || '#' %>" class="block relative pb-[40%]">
                <img src="<%= banner.image %>" alt="<%= banner.title %>" class="absolute inset-0 w-full h-full object-cover">
              </a>
            </div>
          <% }); %>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </section>

    <!-- 菜单导航 -->
    <section class="mb-8">
      <div class="grid grid-cols-5 gap-4">
        <% data.menus.forEach(function(menu) { %>
          <a href="<%= menu.url %>" class="flex flex-col items-center p-4 bg-white rounded-lg shadow hover:shadow-lg transition-shadow">
            <img src="/images/icons/<%= menu.icon %>" alt="<%= menu.name %>" class="w-12 h-12 mb-2">
            <span class="text-sm text-gray-800"><%= menu.name %></span>
          </a>
        <% }); %>
      </div>
    </section>

    <!-- 商品分类 -->
    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4">商品分类</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <% data.categories.forEach(function(category) { %>
          <a href="/category/<%= category.id %>" class="block bg-white rounded-lg shadow p-4 text-center hover:shadow-lg transition-shadow">
            <% if (category.pic) { %>
              <img src="<%= category.pic %>" alt="<%= category.name %>" class="w-16 h-16 mx-auto mb-2 object-cover">
            <% } %>
            <span class="text-gray-800"><%= category.name %></span>
          </a>
        <% }); %>
      </div>
    </section>

    <!-- 热门商品 -->
    <section class="mb-8">
      <h2 class="text-xl font-semibold mb-4">热门商品</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
        <% data.hotGoods.forEach(function(goods) { %>
          <a href="/goods/<%= goods.id %>" class="block bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
            <img src="<%= goods.mainPic %>" alt="<%= goods.title %>" class="w-full h-48 object-cover">
            <div class="p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2 line-clamp-2"><%= goods.title %></h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2"><%= goods.subTitle || '' %></p>
              <div class="flex items-center justify-between">
                <span class="text-red-600 font-semibold">¥<%= goods.price %></span>
                <span class="text-gray-400 text-sm">已售 <%= goods.sold %></span>
              </div>
            </div>
          </a>
        <% }); %>
      </div>
    </section>

    <!-- 推荐商品 -->
    <section>
      <h2 class="text-xl font-semibold mb-4">推荐商品</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
        <% data.recommendGoods.forEach(function(goods) { %>
          <a href="/goods/<%= goods.id %>" class="block bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition-shadow">
            <img src="<%= goods.mainPic %>" alt="<%= goods.title %>" class="w-full h-48 object-cover">
            <div class="p-4">
              <h3 class="text-lg font-medium text-gray-800 mb-2 line-clamp-2"><%= goods.title %></h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2"><%= goods.subTitle || '' %></p>
              <div class="flex items-center justify-between">
                <span class="text-red-600 font-semibold">¥<%= goods.price %></span>
                <span class="text-gray-400 text-sm">已售 <%= goods.sold %></span>
              </div>
            </div>
          </a>
        <% }); %>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white mt-8 py-8">
    <div class="container mx-auto px-4 text-center text-gray-600">
      <p>&copy; 2024 商城. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  <script>
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html> 